(function() {
  
var tagSize = 4;

tagsFunc = function(key, value) {
    // getter
  if (arguments.length === 1) {
    var ret = [];
    for (i = 0; i<tagSize; i++) {
      ret[i] = this.get('tag'+i);
    }
    return ret;
  // setter
  } else {
    for (i = 0; i<tagSize; i++) {
      this.set('tag'+i, value[i]);
    }
    return value;
  }
};

tagNamesFunc = function() {
  var tagNames = [];
  for (i = 0; i<tagSize; i++) {
    tagNames[i]='tag'+i;
  }
  return tagNames;
};

Ember.TagsField = Ember.View.extend({
  tagName : 'span',

  attributeBindings: ['tags'],
  
  tag0: null,
  tag1: null,
  tag2: null,
  tag3: null,
  
  tagNames : function() {
    var ret = [];
    for (i = 0; i<tagSize; i++) {
      ret[i]='tag'+i;
    }
    return ret;
  }.property('tagSize'),
  tags: tagsFunc.property.apply(tagsFunc, tagNamesFunc()),
  
  defaultTemplate : Ember.Handlebars.compile(
      '{{view Ember.TextField class="input-small" valueBinding="view.tag0"}} '+
      '{{view Ember.TextField class="input-small" valueBinding="view.tag1"}} '+
      '{{view Ember.TextField class="input-small" valueBinding="view.tag2"}} '+
      '{{view Ember.TextField class="input-small" valueBinding="view.tag3"}}'
      )
});
  
})();